<template lang="pug">
  el-form-item(v-if='!scope' ref="formItem" :prop="config.propertyName" :class="config.label?'':'form-label-hidden'" :label="config.label" :rules="rules")
    el-select.tree-select(:class="{'scope-success': flag && !scopeErrorMessage, 'scope-normal' : !flag}" clearable :disabled="readonly" :placeholder="readonly ? ' ' : config.placeholder"  filterable :remote="config.loadType === 'async' && config.connectType === 'interface' ? true : false" v-model="rootForm.properties[config.propertyName]" @change="change" :loading="loading" :remote-method="debounceRemoteMethod" :multiple="config.selectType === 'multiple'"
     @focus="menuOpen" @blur="menuClose")
      el-option(v-for="one in options" :key="one.value" :label="one.label" :value="one.value")
  div(v-else)
    el-select.tree-select(:class="{'scope-success': flag && !scopeErrorMessage, 'scope-normal' : !flag}" clearable :disabled="readonly" :placeholder="readonly ? ' ' : config.placeholder"  filterable :remote="config.loadType === 'async' && config.connectType === 'interface' ? true : false" v-model="scope[config.propertyName]" @change="change" :loading="loading" :remote-method="debounceRemoteMethod" :multiple="config.selectType === 'multiple'"
     @focus="menuOpen" @blur="menuClose")
      el-option(v-for="one in options" :key="one.value" :label="one.label" :value="one.value")

</template>
<script>
import _ from 'lodash';
import requiredLabel from '../../../../components/requiredLabel';
import inputCommon from '../../../../mixin/inputCommon';
import { invokeInterface, getDictionaryList } from '../../../../service';

export default {
  name: 'render',
  components: { requiredLabel },
  props: [
    'config',
    'editor',
    'isMobile',
    'scope',
    'cancelLinkAndDefaultValue',
    'readonlyMain',
  ],
  inject: ['rootForm'],
  mixins: [inputCommon],
  data() {
    return {
      defaultFlag: false,
      options: [],
      valueConsistsOf: 'ALL', // 选中所有子节点 则展示所有选中的 BRANCH_PRIORITY LEAF_PRIORITY ALL_WITH_INDETERMINATE

      loading: false,
      cachedOptions: [],
      overLimitState: false, // 查询条数的提示语
      default: this.config.selectType === 'single' ? undefined : [],
      debounceRemoteMethod: _.debounce(this.remoteMethod, 300),
      scopeErrorMessage: '',
      interfaceParams: {},
      flag: false, // 还未被验证
    };
  },
  methods: {
    dealTreeOptions() {
      // if (!this.config.isTreeSelect) {
      //   _.forEach(this.options, one => {
      //     if (one.children) {
      //       one.children = JSON.stringify(one.children)
      //     }
      //   })
      // }
    },
    change() {
      this.$refs.formItem &&
        this.$refs.formItem.$emit(
          'el.form.change',
          this.rootForm.properties[this.config.propertyName]
        );
      this.validate();
      let obj = this.options.find(one => one.value == this.rootForm.properties[this.config.propertyName])
      return this.config.changeCb && this.getParsedFn('changeCb')(this.rootForm.properties[this.config.propertyName], obj);
    },
    normalizer(node) {
      let idKey = this.config.optionsValueKey;
      let labelKey = this.config.optionsLabelKey;
      let childrenKey = 'children';
      return {
        id: node[idKey] || node[labelKey],
        label: node[labelKey],
        children: node[childrenKey],
      };
    },
    remoteMethod(query) {
      if (!query) return
      if (this.defaultFlag) {
        this.options = []
        if (this.config.returnObject) {
          if (_.isArray(propertyNameVal)) {
            this.options = propertyNameVal;
          } else {
            this.options = [propertyNameVal];
          }
          this.dealTreeOptions();
          callback(null, this.options);
        } else {
          this.getOptions(query).then(data => {
            this.options = data
          })
        }
        this.defaultFlag = false
      }else{
        this.getCachedOptions();
        this.getOptions(query).then(data => {
          if (this.config.selectType === 'multiple') {
            this.options = _.uniqWith(
              data.concat(this.cachedOptions),
              _.isEqual
            );
          } else {
            this.options = data;
          }
        })
      }
    },
    // remoteMethod({ action, searchQuery, callback }) {
    //   debugger
    //   if (action === 'ASYNC_SEARCH') {
    //     // 异步初始值
    //     if (this.defaultFlag) {
    //       this.options = [];
    //       let propertyNameVal = this.getValue();
    //       if (propertyNameVal) {
    //         if (this.config.returnObject) {
    //           if (_.isArray(propertyNameVal)) {
    //             this.options = propertyNameVal;
    //           } else {
    //             this.options = [propertyNameVal];
    //           }
    //           this.dealTreeOptions();
    //           callback(null, this.options);
    //         } else {
    //           let searchQuery;
    //           if (_.isArray(propertyNameVal)) {
    //             searchQuery = propertyNameVal;
    //           } else {
    //             searchQuery = [propertyNameVal];
    //           }
    //           let searchQueryArr = _.map(searchQuery, one => {
    //             if (one) {
    //               return this.getOptions(one);
    //             }
    //           });
    //           Promise.all(searchQueryArr).then(data => {
    //             _.forEach(data, one => {
    //               this.options = _.uniqWith(
    //                 one.concat(this.options),
    //                 _.isEqual
    //               );
    //             });

    //             callback(null, this.options);
    //           });
    //         }
    //       }
    //       this.defaultFlag = false;
    //     } else {
    //       this.getCachedOptions();
    //       this.getOptions(searchQuery).then(data => {
    //         if (this.config.selectType === 'multiple') {
    //           this.options = _.uniqWith(
    //             data.concat(this.cachedOptions),
    //             _.isEqual
    //           );
    //         } else {
    //           this.options = data;
    //         }
    //         callback(null, this.options);
    //       });
    //     }
    //   }
    // },
    // 聚焦事件
    menuOpen() {
      return this.config.focusCb && this.getParsedFn('focusCb')();
    },
    // 失去焦点事件
    menuClose() {
      return this.config.blurCb && this.getParsedFn('blurCb')()
    },
    getValue() {
      if (this.scope) {
        return this.scope[this.config.propertyName];
      } else {
        return this.rootForm.properties[this.config.propertyName];
      }
    },
    getCachedOptions() {
      let val = this.getValue();
      this.cachedOptions = [];
      if (val) {
        if (this.config.returnObject) {
          if (_.isArray(val)) {
            this.cachedOptions = val;
          } else {
            this.cachedOptions = [val];
          }
        } else {
          if (_.isArray(val)) {
            _.forEach(this.options, one => {
              if (val.indexOf(one[this.config.optionsValueKey]) > -1) {
                this.cachedOptions.push(one);
              }
            });
          } else {
            _.forEach(this.options, one => {
              if (val === one[this.config.optionsValueKey]) {
                this.cachedOptions.push(one);
              }
            });
          }
        }
      }
    },
    getOptions(query) {
      this.loading = true;
      let params = {};
      if (query) {
        params[this.config.queryKey] = query;
      }
      if (this.interfaceParams) {
        try {
          let varParams = this.interfaceParams;
          params = Object.assign(varParams, params);
        } catch {
          this.$message({
            type: 'error',
            message: '参数格式错误',
          });
          return;
        }
      }
      return invokeInterface(this.config.dataInterfaceId, params).then(data => {
        this.loading = false;
        data.forEach(one => {
          this.$set(one, 'label', one[this.config.optionsLabelKey])
          this.$set(one, 'value', one[this.config.optionsValueKey])
        })
        return data;
      });
    },
    // 针对scope的验证
    validate() {
      if (this.scope) {
        this.flag = true;
        let value = this.scope[this.config.propertyName];
        if (this.required && (!value || !value.length)) {
          this.scopeErrorMessage = '必填项';
          return false;
        }
        this.scopeErrorMessage = '';
        return true;
      }
    },
  },
  created() {
    if (this.scope && this.scope[this.config.propertyName] === undefined) {
      this.scope[this.config.propertyName] = this.default;
    }
    // 关联值变化了  初始化数据刷新
    if (this.config.connectType === 'interface' && this.config.linkSearch) {
      this.$watch(this.getParsedEx('linkSearchEx'), newValue => {
        this.rootForm.properties[this.config.propertyName] = this.default;
        this.getOptions().then(data => {
          this.options = data;
        });
      });
    }
    // 是否为(接口)搜索还是直接（字典）
    if (
      this.config.connectType === 'dictionary' &&
      this.config.dataDictionaryId
    ) {
      this.options = [];
      // 当返回对象且直接加载时，页面显示的信息会等获取数据接口成功才回显，并不会直接拿对象里的数据
      if (
        this.config.returnObject &&
        this.config.selectType === 'single' &&
        this.getValue()
      ) {
        this.options = [this.getValue()];
      } else if (
        this.config.returnObject &&
        this.config.selectType === 'multiple' &&
        this.getValue() &&
        this.getValue().length > 0
      ) {
        this.options = this.getValue();
      }
      this.dealTreeOptions();

      this.config.optionsValueKey = 'value';
      this.config.optionsLabelKey = 'label';
      getDictionaryList(this.config.dataDictionaryId).then(data => {
        this.options = _.cloneDeep(data);
        this.dealTreeOptions();
      });
    } else if (this.config.connectType === 'interface') {
      if (this.config.interfaceParams) {
        this.interfaceParams = this.getParsedEx('interfaceParams')();
      }
      if (this.$route.path.indexOf('preview') === -1) {
        if (window.sessionStorage.formConfig) {
          let oldConfig = JSON.parse(window.sessionStorage.formConfig);
          console.log(this.config, oldConfig)
          if (
            oldConfig.dataInterfaceId === this.config.dataInterfaceId &&
            this.config.searchClick === oldConfig.searchClick &&
            this.config.componentId === oldConfig.componentId
          ) {
            return;
          } else {
            window.sessionStorage.setItem(
              'formConfig',
              JSON.stringify(this.config)
            );
          }
        } else {
          window.sessionStorage.setItem(
            'formConfig',
            JSON.stringify(this.config)
          );
        }
      }
      this.options = [];

      if (this.config.dataInterfaceId) {
        if (this.config.loadType === 'async') {
          // 远程搜索
          this.defaultFlag = true;


          console.log(this.rootForm.properties[this.config.propertyName])
          // if (this.rootForm.properties[this.config.propertyName]) {
          //   console.log(1)
          //   this.getOptions(this.rootForm.properties[this.config.propertyName]).then(data => {
          //     this.options = data
          //   })
          // }
        } else {
          this.getOptions().then(data => {
            this.options = data;
            this.dealTreeOptions();
          });
        }
      }
    }
  },
};
</script>
